<template>
  <div class="position-relative width-100 height-100">
    <div class="position-absolute indicator-item-container">
      <div class="indicator-container">
        <div
          v-for="tab in widget.UI.data.items"
          class="flex-item indicator-box"
          :key="tab.widgetId"
          @click="tabChange(tab.widgetId)"
        >
          <div :style="containerStyle(tab.widgetId)"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {transStrToHtmlDecode, formatColor} from '@/utils';
  import {mapState} from 'vuex';
  import {WidgetPageView} from "@/modules/IDE/widget/atom/widgetPageView";
  import {WidgetFactory} from "@/modules/IDE/widgetFactory";
  import iconfont from "@/assets/font/iconfont.json";

  export default {
    name: 'PageViewWidget',
    props: {
      widget: {
        type: WidgetPageView,
        default: () => {
          return {};
        }
      },
      isSelectMode: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {activeIndicator: 0};
    },
    computed: {
      ...mapState({
        activeTheme: state => state.ide.activeTheme,
      }),
      state() {
        if (!this.widget || !this.widget.UI.state) return;
        return this.widget.getCurrentState();
      },
      containerStyle() {
        return (widgetId) => {
          const {indicatorData = {}} = this.widget.UI.data;
          const widget = WidgetFactory.getWidgetById(widgetId);
          const isActive = !this.isSelectMode ? widget.display : widget.displayForPicker;
          const {color, activeColor, size} = indicatorData;
          return {
            'backgroundColor': formatColor(isActive ? activeColor : color, this.activeTheme),
            'width': isActive ? 4 * size + 'px' : size + 'px',
            'height': size + 'px',
            'borderRadius': isActive ? 10 + 'px' : size + 'px',
          }
        };
      },
    },
    watch: {
      'widget.tempRect': {
        handler() {
          this.updateChildrenRect();
        },
        immediate: true,
        deep: true
      },
      'widget.UI.data': {
        handler() {
          this.updateChildrenRect();
        },
        immediate: true,
        deep: true
      },
      'widget.UI.states': {
        handler(states = []) {
          this.widget.children.forEach(child => {
            child.UI.states.forEach((state, idx) => {
              const parentState = states[idx];
              if (!parentState) return;
              state.backStyle.backgroundColor = parentState.backStyle.backgroundColor;
            });
          });
        },
        immediate: true,
        deep: true
      },
    },
    mounted() {
      this.$EventBus.$on(`pageViewAdded-${this.widget.id}`, () => {
        const newTabWidgetId = this.widget.addTab();
        this.tabChange(newTabWidgetId);
      });
      this.$EventBus.$on(`pageViewDeleted-${this.widget.id}`, (childId) => {
        const newTabWidgetId = this.widget.deleteTab(childId);
        newTabWidgetId && this.tabChange(newTabWidgetId);
      });
    },
    beforeDestroy() {
      this.$EventBus.$off(`pageViewAdded-${this.widget.id}`);
      this.$EventBus.$off(`pageViewDeleted-${this.widget.id}`);
    },
    methods: {
      tabChange(widgetId) {
        const activeWidget = WidgetFactory.getWidgetById(widgetId);
        if (!activeWidget) return;
        if (!this.isSelectMode) {
          this.$EventBus.$emit('selectWidget', activeWidget);
        } else {
          this.$EventBus.$emit('selectWidgetForPicker', activeWidget);
        }
      },
      updateChildrenRect() {
        // let rect = {top: 0, left: 0, width: 1024, height: 718};
       let rect = {
          top: 0, left: 0,
          width: this.widget.tempRect.width,
          height: this.widget.tempRect.height - 50
        }
        this.widget.children.forEach(child => {
          child.draggable = true;
          child.resizable = true;
          child.rect = rect;
        });
        this.$nextTick(() => {
          this.widget.children.forEach(child => {
            child.draggable = false;
            child.resizable = false;
          });
        });
      }
    }
  };
</script>

<style scoped lang="less">
  .indicator-item-container {
    width: 100%;
    height: 60px;
    bottom: 0;
    left: 0;

    .indicator-container {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      gap: 10px;

      .indicator-box {
        min-width: 50px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .active {
        width: 60px;
        background: #fff;
        border-radius: 10px;
      }
    }
  }

</style>
